<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <wd-icon name="search" size="16px" class="search-icon"></wd-icon>
      <input class="search-input" type="text" placeholder="搜索支出记录" v-model="searchKeyword" @input="onSearch" />
      <wd-icon v-if="searchKeyword" name="close-fill" size="16px" class="clear-icon" @click="clearSearch"></wd-icon>
    </view>

    <!-- 分类筛选 -->
    <expense-category-filter :categories="categories" :selected-category="selectedCategory" :category-stats="categoryStats" @select="selectCategory" />

    <!-- 日期范围筛选 -->
    <view class="date-filter">
      <date-range-selector :initial-start-date="startDate" :initial-end-date="endDate" @change="onDateRangeChange" />
      <wd-button type="primary" size="small" class="stats-button" @click="showStats = true">
        <wd-icon name="chart" size="14px"></wd-icon>
        <text>统计</text>
      </wd-button>
    </view>

    <!-- 支出列表 -->
    <expense-list :expenses="filteredExpenses" @edit="editExpense" @delete="confirmDeleteExpense" @view="viewExpense" />

    <!-- 添加按钮 -->
    <view class="add-button" :class="{ hidden: showForm }" @click="showAddForm">
      <wd-icon name="add" size="24px" color="#fff"></wd-icon>
    </view>

    <!-- 支出表单 -->
    <expense-form :show="showForm" :expense="currentExpense" @update:show="showForm = $event" @submit="submitExpense" />

    <!-- 支出详情 -->
    <expense-detail :show="showDetail" :expense="currentExpense" @update:show="showDetail = $event" @edit="editExpense" @delete="confirmDeleteExpense" />

    <!-- 统计面板 -->
    <expense-stats :show="showStats" :expenses="expenses" @update:show="showStats = $event" @date-range-change="onStatsDateRangeChange" />

    <!-- 删除确认对话框 -->
    <wd-message-box v-model="showDeleteConfirm" title="删除支出" content="确定要删除这条支出记录吗？" show-cancel-button @confirm="deleteExpense" />
  </view>
</template>

<script>
import { useExpenseStore } from "../../stores/expense.js";
import { EXPENSE_CATEGORIES } from "../../stores/expense.js";
import ExpenseCategoryFilter from "../../components/ExpenseCategoryFilter.vue";
import ExpenseList from "../../components/ExpenseList.vue";
import ExpenseForm from "../../components/ExpenseForm.vue";
import ExpenseDetail from "../../components/ExpenseDetail.vue";
import ExpenseStats from "../../components/ExpenseStats.vue";
import DateRangeSelector from "../../components/DateRangeSelector.vue";

export default {
  components: {
    ExpenseCategoryFilter,
    ExpenseList,
    ExpenseForm,
    ExpenseDetail,
    ExpenseStats,
    DateRangeSelector,
  },
  setup() {
    const expenseStore = useExpenseStore();
    return { expenseStore };
  },
  data() {
    const today = new Date();
    const lastMonth = new Date(today);
    lastMonth.setMonth(today.getMonth() - 1);

    return {
      searchKeyword: "",
      selectedCategory: "all",
      startDate: lastMonth.getTime(),
      endDate: today.getTime(),
      today: today.getTime(),
      showForm: false,
      showDetail: false,
      showStats: false,
      showDeleteConfirm: false,
      currentExpense: null,
      categories: EXPENSE_CATEGORIES,
    };
  },
  computed: {
    expenses() {
      return this.expenseStore.expenses;
    },
    categoryStats() {
      return this.expenseStore.categoryStats;
    },
    filteredExpenses() {
      // 使用 store 中的过滤方法
      return this.expenseStore.filteredExpenses;
    },
  },
  mounted() {
    // 设置初始日期范围
    this.expenseStore.setDateRange(this.startDate, this.endDate);
  },
  methods: {
    onSearch() {
      this.expenseStore.setSearchKeyword(this.searchKeyword);
    },
    clearSearch() {
      this.searchKeyword = "";
      this.expenseStore.setSearchKeyword("");
    },
    selectCategory(category) {
      this.selectedCategory = category;
      this.expenseStore.setSelectedCategory(category);
    },
    formatDate(timestamp) {
      if (!timestamp) return "";
      const date = new Date(timestamp);
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${month}月${day}日`;
    },
    onDateRangeChange(startDate, endDate) {
      this.startDate = startDate;
      this.endDate = endDate;
      this.expenseStore.setDateRange(startDate, endDate);
    },
    onStatsDateRangeChange(start, end) {
      this.startDate = start;
      this.endDate = end;
      this.expenseStore.setDateRange(start, end);
    },
    showAddForm() {
      this.currentExpense = null;
      this.showForm = true;
    },
    editExpense(expense) {
      this.currentExpense = { ...expense };
      this.showDetail = false;
      this.showForm = true;
    },
    viewExpense(expense) {
      this.currentExpense = expense;
      this.showDetail = true;
    },
    submitExpense(expense) {
      if (expense.id) {
        // 更新现有支出
        this.expenseStore.updateExpense(expense);
      } else {
        // 添加新支出
        this.expenseStore.addExpense(expense);
      }
      this.showForm = false;
    },
    confirmDeleteExpense(expense) {
      this.currentExpense = expense;
      this.showDeleteConfirm = true;
    },
    deleteExpense() {
      if (this.currentExpense) {
        this.expenseStore.deleteExpense(this.currentExpense.id);
        this.showDetail = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
  padding: 10px 15px;
  box-sizing: border-box;
  position: relative;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 20px;
  padding: 8px 12px;
  margin-bottom: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  .search-icon {
    margin-right: 8px;
    color: #999;
  }

  .search-input {
    flex: 1;
    height: 20px;
    font-size: 14px;
    border: none;
    outline: none;
  }

  .clear-icon {
    color: #999;
  }
}

.date-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;

  .stats-button {
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 30px;
    background-color: #ff8c00;
    margin-left: 10px;

    text {
      margin-left: 4px;
      font-size: 12px;
    }
  }
}

.add-button {
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #ff8c00;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 140, 0, 0.4);
  z-index: 10;
  transition: all 0.3s ease;

  &.hidden {
    transform: scale(0);
    opacity: 0;
  }
}
</style>
